import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { visualizer } from 'rollup-plugin-visualizer'
import ViteRestart from 'vite-plugin-restart'
import Components from 'unplugin-vue-components/vite'
import {
  // AndDesignVueResolver,
  ElementPlusResolver
} from 'unplugin-vue-components/resolvers'
import AutoImport from 'unplugin-auto-import/vite'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import vueSetupExtend from 'vite-plugin-vue-setup-extend'
import ViteImages from 'vite-plugin-vue-images'
// import postcssPxToViewport from 'postcss-px-to-viewport'
import postcssPxToViewport from 'postcss-px-to-viewport-8-plugin'
// Unocss 插件
import Unocss from 'unocss/vite'
// Unocss 默认预设
import presetUno from '@unocss/preset-uno'
// Unocss 属性模式预设
import presetAttributify from '@unocss/preset-attributify'
// Unocss 指令转换插件
import transformerDirective from '@unocss/transformer-directives'

import path from 'path'

// const path = require('path')


// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      '@c': path.resolve(__dirname, './src/components')
    }
  },
  plugins: [
    vue(),
    visualizer({ // rollup打包分析的可视化
      filename: 'visualizer.html', // 生成的文件名
      // open: true,  // 打包后在在浏览器打开文件
      template: 'treemap',
      // gzipSize: true, // 在图表中显示gzip大小
      // brotli: true, // 在图表中显示brotli大小
    }),
    ViteRestart({ // 修改 vite.config.t/js 会重新构建（启动）项目
      restart: [
        'vite.config.[jt]s',
      ]
    }),
    // 配置项目内组件 & API 的自动引入 ---------start
    AutoImport({
      // 需要去解析的文件
      include: [
        /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
        /\.vue$/,
        /\.vue\?vue/, // .vue
        /\.md$/ // .md
      ],
      // imports 指定自动引入的包位置（名）
      imports: ['vue', 'pinia', 'vue-router'],
      // 生成相应的自动导入json文件。
      eslintrc: {
        // 启用
        enabled: true,
        // 生成自动导入json文件位置
        filepath: './.eslintrc-auto-import.json',
        // 全局属性值
        globalsPropValue: true
      },
      // resolvers: [ElementPlusResolver()]
    }),
    Components({
      // imports 指定组件所在目录，默认为 src/components
      dirs: ['src/components/', 'src/view/'],
      // 需要去解析的文件
      include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
      resolvers: [
        // ElementPlusResolver({
        //   // 设置为 true，在引入 ElButton 时会自动引入样式文件
        //   sideEffect: true
        // })
      ]
    }),

    // 配置项目内组件 & API 的自动引入 ---------end
    // 目前感觉没什么用
    createSvgIconsPlugin({  // 用于生成 svg 雪碧图，方便在项目中使用 .svg 文件
      // 指定要缓存的图标文件夹
      iconDirs: [path.resolve(process.cwd()), 'src/icons'],
      // 指定 symbolId 格式
      symbolId: 'icon-[dir]-[name]'
    }),
    vueSetupExtend(), // vue3语法糖默认是没有name属性的，在我们使用keep-alive的时候需要用到name
    ViteImages({
      dirs: ['src/assets'], // 图像目录的相对路径
      extensions: ['jpg', 'jpeg', 'png', 'svg', 'webp'], // 有效的图像扩展
      customResolvers: [], // 覆盖名称->图像路径解析的默认行为
      customSearchRegex: '([a-zA-Z0-9]+)', // 重写搜索要替换的变量的Regex。

    }),
    Unocss({
      // 预设
      presets: [presetUno(), presetAttributify()],
      // 指令转换插件
      transformers: [transformerDirective()],
      // 自定义规则
      rules: []
    })
  ],
  css: {
    // 将px改为vw
    postcss: { 
      // plugins: [
      //   postcssPxToViewport({
      //     viewportWidth: 1920 //---基于1920宽度为100vw
      //   })

      // ]
    }
  },
  // 跨域
  server: {
    // 使用IP能访问
    host: '0.0.0.0',
    // 设为true时若端口已被占用则会直接退出，而不是尝试下一个可用端口
    strictPort: false,
    open: true, // 启动时自动在浏览器中打开应用程序
    // 自定义代理规则
    proxy: {
      // 拦截所有以 '/api'开头的请求路径
      // "/api": {
      //   target: '', // 代理目标的地址
      //   changeOrigin: true, // true 启用跨域请求头的更改
      //   rewrite:(path) => path.replace(/^\/api/, "") ,// 将'/api'替换为空字符串
      //   logLevel: 'error',
      // }
    },
    // 预览
    preview: {

    }
  }
})
